菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码:
点击运行
保存
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <p>全选:</p> <input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()"> <label for="checkbox">{{checked}}</label> <p>多个复选框:</p> <input type="checkbox" id="google" value="Google" v-model="checkedNames"> <label for="google">Google</label> <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"> <label for="taobao">taobao</label><br> <span>选择的值为:{{checkedNames}}</span> </div> <script> new Vue({ el:'#app', data:{ checked:false, checkedNames:[], checkedArr:["Taobao", "Google"] }, methods:{ changeAllChecked:function() { if (this.checked) { this.checkedNames = this.checkedArr } else { this.checkedNames = [] } } }, watch:{ "checkedNames":function() { if (this.checkedNames.length == this.checkedArr.length) { this.checked = true } else { this.checked = false } } } }) </script> </body> </html>
运行结果